<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div id="typo3-topbar">
	<div class="typo3-topbar-container" role="navigation" id="typo3-top-container">
		<div class="typo3-topbar-site">
			<a class="typo3-topbar-site-logo" href="{logoLink}" target="_blank" rel="noopener noreferrer">
				<img src="{f:uri.resource(path: 'Images/typo3_logo_orange.svg', extensionName: 'backend')}" width="22" height="22" title="TYPO3 Content Management System" alt="">
			</a>
			<span class="typo3-topbar-site-name">{activeWorkspace}</span>
		</div>
		<div class="typo3-topbar-tabs t3js-workspace-tabs">
			<ul class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active"><a href="#visual" aria-controls="visual" role="tab" data-toggle="tab" data-actions="true"><f:translate key="preview.visualPreview" extensionName="workspaces" /></a></li>
				<li role="presentation"><a href="#list" aria-controls="list" role="tab" data-toggle="tab" data-actions="false"><f:translate key="preview.listView" extensionName="workspaces" /></a></li>
			</ul>
		</div>
		<div class="typo3-topbar-workspace-actions t3js-workspace-actions">
			<f:if condition="{liveUrl}">
				<div class="workspace-action">
					<div class="slider-wrapper">
						<span>Published Version</span><div
						id="workspace-stage-slider"
						data-slider-min="0"
						data-slider-max="100"
						data-slider-value="100"
						data-slider-tooltip="hide"
						style="width: 150px;"
					></div>
						<span>Staged Version</span>
					</div>
				</div>
			</f:if>
			<div class="workspace-action t3js-stage-buttons">
				<f:render partial="Preview/StageButtons" arguments="{_all}"/>
			</div>
			<div class="workspace-action t3js-preview-mode">
				<f:if condition="{liveUrl}">
					<f:then>
						<div class="btn-group">
							<button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<span class="t3js-active-preview-mode active-preview-mode" data-active-preview-mode="{firstPreviewMode}"><f:translate key="preview.mode{firstPreviewMode -> f:format.case(mode: 'capital')}" extensionName="workspaces" /></span> <span class="caret"></span>
							</button>
							<ul class="dropdown-menu dropdown-menu-right">
								<f:for each="{splitPreviewModes}" as="mode">
									<li><a href="#" data-preview-mode="{mode}"><span><f:translate key="preview.mode{mode -> f:format.case(mode: 'capital')}" extensionName="workspaces" /></span></a></li>
								</f:for>
							</ul>
						</div>
					</f:then>
					<f:else>
						<span><f:translate key="info.newpage.detail" extensionName="workspaces" /></span>
					</f:else>
				</f:if>
			</div>
		</div>
	</div>
</div>

<div role="tabpanel" class="workspace-panel">
	<div class="tab-content">
		<div role="tabpanel" class="tab-pane active workspaces preview-mode-slider" id="visual">
			<div class="t3js-workspace-preview">
				<f:if condition="{liveUrl}">
					<iframe src="{liveUrl}" style="height: 0px;" id="live-view"></iframe>
				</f:if>
				<iframe src="{wsUrl}" id="workspace-view"></iframe>
			</div>
		</div>
		<div role="tabpanel" class="tab-pane workspaces" id="list">
			<iframe src="{wsSettingsUrl}" id="workspace-list"></iframe>
		</div>
	</div>
</div>
</html>
